<template>
  <div>
    <el-card>
      <el-button type="primary" size="mini" @click="handleCreate()"
        >新增</el-button
      >
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; margin-top: 10px"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
      >
        <el-table-column prop="id" label="字典编号"> </el-table-column>
        <el-table-column prop="dictName" label="字典名称"> </el-table-column>
        <el-table-column label="字典类型 ">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="goDetails(scope.row.dictType)"
              >{{ scope.row.dictType }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="状态 ">
          <template slot-scope="scope">
            {{ scope.row.status == 0 ? "正常" : "停用" }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注 "> </el-table-column>
        <el-table-column prop="createTime" label="创建时间 "> </el-table-column>
        <el-table-column prop="name" label="操作 ">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row.id)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @pageChange="pageChange"
      />
    </el-card>
    <!-- 弹框 -->
    <el-dialog title="添加字典类型" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="字典名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="status">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDicData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import pagegation from '../../components/pagination'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      dialogVisible: false,
      form: {
        name: "",
        type: "",
        desc: "",
      },
      total: 0,
      status: 0, //状态，放在form里面，不能回显
      pageNum: 1,
      pageSize: 50,
      dicId: null,
    };
  },
  created() {
    // this.fetchTableList()
  },
  activated: function () {
    this.fetchTableList();
  },
  methods: {
    // 去详情页
    goDetails(dicType) {
      this.$router.push({
        path: "/dictionariesDetails",
        query: {
          dicType,
        },
      });
    },
    // 弹框确定
    submitDicData() {
      if (this.dicId) {
        this.handleUpdateDic();
      } else {
        this.handleAddDic();
      }
    },
    // 新增
    handleAddDic() {
      this.$http({
        url: this.$http.adornUrl("/sysdicttype/save"),
        method: "post",
        data: this.$http.adornData({
          dictName: this.form.name,
          dictType: this.form.type,
          status: this.status,
          remark: this.form.desc,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    // 修改
    handleUpdateDic() {
      this.$http({
        url: this.$http.adornUrl("/sysdicttype/update"),
        method: "post",
        data: this.$http.adornData({
          id: this.dicId,
          dictName: this.form.name,
          dictType: this.form.type,
          status: this.status,
          remark: this.form.desc,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    // 获取表格数据
    fetchTableList() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/sysdicttype/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.total = data.page.totalCount;
            this.tableData = data.page.list;
          }, 1000);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleDelete(id) {
      let ids = [id];
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sysdicttype/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.fetchTableList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    handleEdit(id) {
      this.dicId = id;
      this.$http({
        url: this.$http.adornUrl(`/sysdicttype/info/${id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dialogVisible = true;
          this.form.name = data.sysDictType.dictName;
          this.form.type = data.sysDictType.dictType;
          this.status = Number(data.sysDictType.status);
          this.form.desc = data.sysDictType.remark;
          this.form.sysType = data.sysDictType.systemType;
        }
      });
    },
    // 新增
    handleCreate() {
      this.dicId = null;
      this.form.name = "";
      this.form.type = "";
      this.form.status = "";
      this.form.desc = "";
      this.dialogVisible = true;
    },
    pageChange(page) {
      console.log(page);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>

<style scoped>
</style>